<template>
  <view>
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="item-title">{{ item.title }}</view>
        <view class="item-detail">{{ item.detail }}</view>
        <view class="item-line"></view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import zPaging from "../../../component/z-paging/z-paging/z-paging.vue";
export default {
  components: {
    zPaging,
  },
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    for (let i = 1; i < 100; i++) {
      this.dataList.push({
        title: "测试" + i,
        detail: i,
      });
    }
  },
  methods: {
    queryList() {
      uni.showLoading({
        title: "加载中",
      });
      setTimeout(() => {
        this.$refs.paging.complete(this.dataList);
        uni.hideLoading();
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped>
.record-scroll {
  height: 100vh;
}
.none-empty {
  margin-top: 200rpx;
}
.item {
  position: relative;
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 30rpx;
}

.item-detail {
  padding: 5rpx 15rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: white;
  background-color: #007aff;
}

.item-line {
  position: absolute;
  bottom: 0rpx;
  left: 0rpx;
  height: 1px;
  width: 100%;
  background-color: #eeeeee;
}
</style>
